import React from 'react';
import {inject, observer} from 'mobx-react';
import {Spin, Table,Icon, Radio} from 'antd';
import {WeaEchart, WeaSelect,WeaLocaleProvider} from 'ecCom';

import ViewWeekMonth from '../../../public/viewweekmonth/ViewWeekMonth';
import * as Util from '../../../util/Util';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
const getUserLanguage= WeaLocaleProvider.getUserLanguage;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

@inject ('planReportDiagramStore')
@observer
export default class OrganizationView extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      _height: Util.getCurrentHeight (),
      columns:this.getColumns(),

    };
    this.store = this.props.planReportDiagramStore;
  }

  getColumns = () => {
    return [
      {
        title: getLabel('33553','分部') ,
        dataIndex: 'showname',
        key: 'showname',
        width: '25%',
        render: (text, record, index) => (
          <div className="wea-workrelate-table-inlineblock">
            {record.sub
              ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@oxpvvz@${record.sub+record.id}`} type="home" className="wea-workrelate-table-i" />
              : <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@t2np8g@${record.sub+record.id}`} type="folder" className="wea-workrelate-table-i" />}
            <div title={text} className="wea-workrelate-table-mleft">
              {text}
            </div>
          </div>
        ),
      },
      {
        title: getLabel('508933','需提交') ,
        dataIndex: 'exist',
        key: 'exist',
        width: '7%',
      },
      {
        title: getLabel('32555','未提交') ,
        dataIndex: 'without',
        key: 'without',
        width: '7%',
      },
      {
        title: getLabel('19611','处理中'),
        children: [
          {
            title: getLabel('220','草稿'),
            dataIndex: 'scoring',
            key: 'scoring',
            width: '7%',
          },
          {
            title: getLabel('19134','审批中'),
            dataIndex: 'assessing',
            key: 'assessing',
            width: '7%',
          },
          {
            title: getLabel('236','退回') ,
            dataIndex: 'back',
            key: 'back',
            width: '7%',
          },
        ],
      },
      {
        title: getLabel('23774','已完成') ,
        dataIndex: 'finish',
        key: 'finish',
        width: '7%',
      },
      {
        title: getLabel('382750','已过期') ,
        children: [
          {
            title: getLabel('220','草稿'),
            dataIndex: 'oscoring',
            key: 'oscoring',
            width: '7%',
          },
          {
            title: getLabel('19134','审批中'),
            dataIndex: 'oassessing',
            key: 'oassessing',
            width: '7%',
          },
          {
            title: getLabel('236','退回') ,
            dataIndex: 'oback',
            key: 'oback',
            width: '7%',
          },
        ],
      },
      {
        title: getLabel('30585','操作') ,
        dataIndex: 'caozuo',
        key: 'caozuo',
        render: (text, record, index) => (
          <div
            title={getLabel('389254','点击查看明细') }
            onClick={() => this.toPersonView (record)}
            className="operates-cur"
          >
            {getLabel('382624','查看明细') }
          </div>
        ),
      },
    ];
  };

  toPersonView = record => {
    let {moreSearchValues} = this.store;
    if (record.sub) {
      moreSearchValues.sub = record.id;
      moreSearchValues.subType = "3";
    } else {
      moreSearchValues.dep = record.id;
      moreSearchValues.depType = "3";
    }
    this.store.selectTabKey = '1';
    this.store.planWorkerReportDiagram ();
  };

  getTableConfig = d => {
    return {
      scroll: {y: this.state._height - 250},
      columns: this.state.columns,
      dataSource: d,
      bordered:true,
      className: 'wea-workrelate-antd-table',
      pagination: false,
      rowSelection: this.rowSelection (),
      loading:this.store.orgLoading
      // scroll:{ x: '150%' }
    };
  };

  rowSelection = () => {
    return {
      selectedRowKeys: this.store.selectedRowKeys,
      onChange: this.store.onSelectChange,
    };
  };

  getRadioGroup = () => {
    let _this = this;
    return {
      defaultValue: _this.store.dateType,
      buttonStyle: 'solid',
      onChange: e => {
        _this.store.dateType = e.target.value;
        _this.store.planReportDiagram ();
      },
    };
  };

  onYearSelectChange = e => {
    this.store.dateValue.year = e;
    this.store.onDateChange('year',e)
    this.store.planReportDiagram ();
    this.store.locationkey = new Date().getTime()
  };
  monthCallBack = e => {
    this.store.dateValue.month = e;
    this.store.planReportDiagram ();
  };

  //时间改变的时候
  weekCallBack = (e, param) => {
    let {week, week2} = this.store.dateValue;
    if (param == 'week') {
      if (e > week2) {
        this.store.dateValue.week = e;
        this.store.dateValue.week2 = e;
      } else {
        this.store.dateValue.week = e;
      }
    } else {
      if (e < week) {
        this.store.dateValue.week2 = e;
        this.store.dateValue.week = e;
      } else {
        this.store.dateValue.week2 = e;
      }
    }
    this.store.locationkey=new Date().getTime()

    // this.store.dateValue[param]=e
    this.store.planReportDiagram ();
  };
  getWeekConfig = param => {
    const {dateValue} = this.store
    const {year} = dateValue
    return {
      year:year,
      currentValue: this.store.dateValue[param]
        ? this.store.dateValue[param]
        : '',
      doClose: e => {
        this.weekCallBack (e, param);
      },
      locationkey: new Date().getTime(),
      isshowdate: true,
      display: this.store.monthWeekSelectComDisplayKey,
      onDateChange:this.onViewDateChange
    };
  };
  onContextClick = () => {
    this.store.locationkey = new Date ().getTime ();
    this.store.monthWeekSelectComDisplayKey = 'none';
  };
  getTitle=()=>{
    const {dateType,dateValue} = this.store
    const {year,month,week,week2} = dateValue
    if(getUserLanguage()==8){
      const weekOrMonth = dateType=='1'?"month":"week" 
      return year+" "+ weekOrMonth+ " "+ (dateType=='1'?month:week) + ' work plan'
    }else{
      const weekOrMonth = dateType=='1'?"月":"周" 
      return year+"年第"+(dateType=='1'?month:week)+weekOrMonth+( (week!=week2 && dateType=="2") ?('至第'+week2+"周"):'' )+ '工作计划'
    }
  }
  onViewDateChange=(totalWeek)=>{
    this.store.locationkey = new Date().getTime()
    const {year,month,week} =this.store.dateValue
      if(week > totalWeek){
        this.store.dateValue.week = totalWeek
        // this.onDateChange ('week', totalWeek);
      }
  }

  render () {
    const {orgTableDatas, showCharts, chartOption, loading,titlename,dateValue} = this.store;
    const {_height} = this.state
    const {year, week, month} = dateValue;
    return (
      <div>
        {showCharts
          ? <div
              style={{
                width: '100%',
                height: _height-130,
                padding: '10px',
              }}
            >
              <div style={{width: '100%', height: _height-140}}>
                <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@4xawzi`}
                  ref="chart"
                  option={chartOption}
                  useDefault={false}
                />
              </div>
            </div>
          : <div className="org-view" onClick={this.onContextClick}>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@yijhiz`} spinning={loading}>
                <div className="date-select">
                  <div className="year-select">
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@swf58h`}
                      value={year}
                      options={toJS (this.store.yearSelectData)}
                      onChange={this.onYearSelectChange}
                    />
                  </div>
                  <div className="date-type">
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@brry5l`} {...this.getRadioGroup ()}>
                      <RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@pz4eg8`} value="1">{getLabel('33452','月') }</RadioButton>
                      <RadioButton ecId={`${this && this.props && this.props.ecId || ''}_RadioButton@koi0x0`} value="2">{getLabel('1926','周') }</RadioButton>
                    </RadioGroup>
                  </div>
                  <div className="date-weeks">
                    {this.store.dateType == '1' &&
                      <ViewWeekMonth ecId={`${this && this.props && this.props.ecId || ''}_ViewWeekMonth@u5l782`}
                        isMonth={true}
                        year={year}
                        currentValue={this.store.dateValue.month}
                        doClose={this.monthCallBack}
                        display={this.store.monthWeekSelectComDisplayKey}
                        locationkey={this.store.locationkey}
                      />}
                    {this.store.dateType == '2' &&
                      <div>
                        <ViewWeekMonth ecId={`${this && this.props && this.props.ecId || ''}_ViewWeekMonth@veqajm`} {...this.getWeekConfig ('week')} />-

                        <ViewWeekMonth ecId={`${this && this.props && this.props.ecId || ''}_ViewWeekMonth@fd2udb`} {...this.getWeekConfig ('week2')} />

                      </div>}

                  </div>

                  {titlename}
                </div>
                <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@04kq0x`} {...this.getTableConfig (toJS (orgTableDatas))} />
              </Spin>
            </div>}
      </div>
    );
  }
}
